import React, { FC, useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Form, Input, Button } from 'antd-mobile';
import { getRules } from './rules';
import { useAuthenticationContent } from './useAuthenticationContent';
export interface IProps extends ICompProps {}
AuthenticationContent.defaultProps = {} as Partial<IProps>;
function AuthenticationContent(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('AuthenticationContent', className);
    const [form] = Form.useForm();
    const [rules, setRules] = useState({
        name: [],
        identify: [],
    });
    useEffect(() => {
        setRules(getRules());
    }, []);
    const { handelFocus, handelBlur, handleSave } = useAuthenticationContent();
    return (
        <RootView className={localClassName} style={style}>
            <Form
                form={form}
                className="form"
                footer={
                    <Button
                        block
                        shape="rounded"
                        className="button"
                        onClick={() => {
                            handleSave(form);
                        }}>
                        保存
                    </Button>
                }>
                <Form.Item
                    required={false}
                    rules={rules.name}
                    className="formitem"
                    name="name"
                    label={<Text className="item-lable">姓名</Text>}>
                    <Input
                        onFocus={handelFocus}
                        onBlur={handelBlur}
                        style={{ border: '2px solid #E5E5E5' }}
                        className="input"
                        placeholder="请输入姓名"
                    />
                </Form.Item>
                <Form.Item
                    required={false}
                    rules={rules.identify}
                    style={{ color: '#808a9d' }}
                    name="identify"
                    label={<Text className="item-lable">身份证号码</Text>}>
                    <Input
                        style={{ border: '2px solid #E5E5E5' }}
                        onFocus={handelFocus}
                        onBlur={handelBlur}
                        className="input"
                        placeholder="请输入身份证号码"
                    />
                </Form.Item>
            </Form>
        </RootView>
    );
}
export default React.memo(AuthenticationContent as FC<IProps>);
const RootView = styled(View)`
    &.AuthenticationContent {
        width: 690px;
        margin: 0 auto;
        margin-top: 48px;
        .form {
            --border-inner: none;
            --border-bottom: none;
            --border-top: none;
        }
        .item-lable {
            font-size: 28px;
            font-weight: 400;
            color: #808a9d;
        }
        .input {
            --color: #000000;
            --font-size: 28px;
            --placeholder-color: #cbcdd6;
            width: 100%;
            height: 80px;
            border-radius: 16px;
            border: 2px solid #e5e5e5;
            padding: 0 32px;
        }
        .button {
            --background-color: #ff8828;
            --text-color: #ffffff;
            width: 520px;
            height: 98px;
            font-size: 32px;
            font-weight: 400;
            margin: 0 auto;
            margin-top: 400px;
        }
    }
`;
